import React from 'react';

import {
  View,
  Text,
  Image,
  WebView,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Constants from '../../common/Constants';
import TImage from '../../components/TImage';
import {Button} from 'react-native-elements';
import Config from '../../config';
import CommonAvatarView from '../common/CommonAvatarView';
import CommonViewPagerOne from '../common/CommonViewPagerOne';
import JifenMallPointAction from '../../actions/jifenmall/JifenMallPointAction';
import {DateUtils, HtmlUtils} from '../../utils/Utils';
import UserRequestAPPConfigAction from '../../actions/user/UserRequestAPPConfigAction';

//point 协议
export default class JifenMallPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.dataSource = [
        {imgurl: require("../../../resource/images/jifenmall/mall_icon_choujiang.png") ,
          width:94, height:95, title:"积分抽奖",  pageKey: Config.pages.jifenmall_luckDraw_page},
        {imgurl: require("../../../resource/images/jifenmall/mall_icon_duihuan.png") ,
          width:94, height:107, title:"积分兑换",  pageKey: Config.pages.jifenmall_duihuan},
        {imgurl: require("../../../resource/images/jifenmall/mall_icon_me.png") ,
          width:94, height:108, title:"我的兑换",  pageKey: Config.pages.jifenmall_my_duihuan},
        {imgurl: require("../../../resource/images/jifenmall/box_icon.png") ,
          width:94, height:95, title:"我的抽奖",  pageKey: Config.pages.jifenmall_my_choujiang},];
    this.state.userData = this.props.pageData.routeData.userData;
    this.state.data = {};
    this.state.configDataDic = {};
    this.state.webViewHeight = 300;

    this._viewPager = null;
    this._needRefresh = false;
  }

  componentDidMount() {
    this._requestPoint();
    this._requestConfig();
  }

  componentWillUnmount() {
    console.log(this._viewPager);
  }

  _dealEnterPage() {
    super._dealEnterPage();
    this._requestPoint();
    this._requestConfig();
  }

  _requestConfig() {
    new UserRequestAPPConfigAction().call(this, {key:"jifen_duihuan_close",requestType:"config"});
    new UserRequestAPPConfigAction().call(this, {key:"jifen_my_duihuan_close",requestType:"config"});
  }

  _requestPoint(){
    new JifenMallPointAction().call(this, {});
    if(this._viewPager){
      this._viewPager.doRefresh();
    }
    else {
      this._needRefresh = true;
    }
  }

  _dealRender() {
    return(
      <View style={{backgroundColor:"#ffffff"}}>
        <ScrollView style={{paddingTop:Config.paddingTop,
            width:SizeUtils.getWindowSize().width,
            height:SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(20),}}
            contentStyle={{width:SizeUtils.getWindowSize().width,
              flexDirection:"column", alignItems:"center",}}>
          {this._renderSmallPager()}
          {this._renderJifen()}
          {this._renderButtons()}
          {this._renderNoticeTxt()}
          {this._renderNoticeContent()}
        </ScrollView>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderSmallPager() {
    return (
    <View style={{width:SizeUtils.getWindowSize().width,
          marginTop:SizeUtils.translateDesignHeightToCode(30),
          flexDirection:"row", justifyContent:"center",
          // borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
        }}>
        <CommonViewPagerOne ref={(ref) => {
          this._viewPager = ref;
          if(this._needRefresh === true) {
            this._viewPager.doRefresh();
            this._needRefresh = false;
          }
        }}
            type={Constants.SLIDER_TYPE.JIFEN_MALL} style={{width:SizeUtils.translateDesignWidthToCode(670),
          height:SizeUtils.translateDesignWidthToCode(300)}} />
      </View>
    )
  }

  _renderJifen(){
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
        justifyContent: 'space-between', paddingLeft:SizeUtils.translateDesignWidthToCode(40),
        paddingRight:SizeUtils.translateDesignWidthToCode(40),
        flexDirection:"row", alignItems: 'center',
        paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
        <View style={{ flexDirection:"row", alignItems: 'center',}}>
          <CommonAvatarView avatarUri={this.state.userData ? this.state.userData.avatar_url : ""} size={60}/>
          <Text style={{color:"#ff0000", fontSize:SizeUtils.translateFontSizeToCode(30)}}> {this._getPoint()} </Text>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>积分</Text>
        </View>
        <View >
          <Button
            backgroundColor="#ff0000"
            buttonStyle = {{width: SizeUtils.translateDesignWidthToCode(220), height:SizeUtils.translateDesignHeightToCode(80),
              borderRadius:SizeUtils.translateDesignNumToCode(20)}}
            textStyle={{fontSize: SizeUtils.translateFontSizeToCode(36), fontWeight:"bold"}}
            title = "签到"
            onPress = {() =>
              {
                new CommonCheckUserTypeAction().call(this,{needLogin:true, needVerify:true},this._onPressQiandaoBtn.bind(this))}
              }
          />
        </View>
      </View>
    )
  }

  _getPoint(){
    if(this.state.jifenData && this.state.jifenData.point)
    {
      return this.state.jifenData.point.points;
    }
  }

  _onPressQiandaoBtn(){
    this.gotoPage(Config.pages.jifenmall_qiandao_page);
  }

  _renderButtons(){
    return(
      <View style={{flexDirection:"row", justifyContent: 'space-between',
        paddingTop:SizeUtils.translateDesignHeightToCode(80),
        width:SizeUtils.getWindowSize().width, paddingLeft:SizeUtils.translateDesignWidthToCode(40),
        paddingRight:SizeUtils.translateDesignWidthToCode(40),}}>
        {this.state.dataSource.map(
          (data, index) => {return this._renderPageBtn(data, index)}
        )}
      </View>
    )
  }

  _renderPageBtn(data, index){
    return(
      <TouchableOpacity style={{flexDirection:"column", alignItems:"center"}}
            key={index} onPress={() => this._onPressPageBtn(data)} >
          <View style={{height:SizeUtils.translateDesignWidthToCode(110)}}>
            <TImage source={data.imgurl}
              style={{width:data.width, height:data.height,}} />
          </View>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
            {data.title}
          </Text>
      </TouchableOpacity>
    )
  }

  _onPressPageBtn(data) {
    new CommonCheckUserTypeAction().call(this,{needLogin:true, needVerify:true}, () => this._gotoTab(data));
  }

  _gotoTab(data){
    if((data.pageKey === Config.pages.jifenmall_duihuan && this.state.configDataDic["jifen_duihuan_close"] != "0") ||
      (data.pageKey === Config.pages.jifenmall_my_duihuan && this.state.configDataDic["jifen_my_duihuan_close"] != "0")
      ) {
      ToastUtils.show("功能暂未开放");
    }
    else {
      this.gotoPage(data.pageKey);
    }
  }

  _renderNoticeTxt(){
    return(
      <View style={{flexDirection:"row",
        marginTop:SizeUtils.translateDesignHeightToCode(30), alignItems:"center", justifyContent:"center"}}>
          <View style={{width:SizeUtils.getWindowSize().width/3,
             height:SizeUtils.translateDesignHeightToCode(3), paddingRight:SizeUtils.translateDesignWidthToCode(20),
              backgroundColor:"#cccccc",}}>
          </View>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
              backgroundColor:"#ffffff",
             paddingLeft:SizeUtils.translateDesignWidthToCode(16),
             paddingRight:SizeUtils.translateDesignWidthToCode(16) }}>
             积分规则
          </Text>
          <View style={{width:SizeUtils.getWindowSize().width/3,
             height:SizeUtils.translateDesignHeightToCode(3), paddingLeft:SizeUtils.translateDesignWidthToCode(20),
              backgroundColor:"#cccccc",}}>
          </View>
      </View>
    )
  }

  _renderNoticeContent(){
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row", justifyContent:"center",
          paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40)}} >
        <WebView
          source={this.getNoticeContent()}
          style={{width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
            height:this.state.webViewHeight,}}
          onNavigationStateChange={(title)=>{
            console.log("onNavigationStateChange",title)
              if(title.title != undefined) {
                this.setState({
                  webViewHeight:Math.min(parseInt(title.title)+40, 700),
                })
              }
            }}
        />
      </View>
    )
  }

  getNoticeContent(){
    if(this.state.jifenData && this.state.jifenData.point_rule != undefined)
    {
      return HtmlUtils.getHtmlWeb(this.state.jifenData.point_rule);
    }
    else {
      return {html:""};
    }
  }
}
